<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--引入layui  -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<!-- 引入jquery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入layui的js-->
<script type="text/javascript"src="layui/layui.js"></script>
<body>
<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">产品名称:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">价格</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginPrice" name="beginPrice" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endPrice" name="endPrice" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">产品类型:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="type_id" id="pType">
					<option value="">请选择</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
<!-- 查看详情的弹层DIV -->
	  <div id="detailDIV" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="detailForm" id="detailForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="type_name" name="type_name" class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称:</label>
				<div class="layui-input-inline" style="width: 350px; float: left;">
				<input type="text" id="name" name="name" class="layui-input" disabled="disabled" >	
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品原价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="oldPrice" name="oldPrice"
						class="layui-input" disabled="disabled" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品现价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="newPrice" name="newPrice"
						class="layui-input" disabled="disabled" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品库存量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="storage" name="storage" class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">牌子:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="plate" name="plate" class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">尺寸:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="size" name="size" class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="cate" name="cate" class="layui-input" disabled="disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">出厂:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="factory" name="factory" class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">主石材质:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="texture" name="texture"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">形状:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="shape" name="shape" class="layui-input" disabled="disabled" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">副石数量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="stone_num" name="stone_num"
						class="layui-input" disabled="disabled" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品描述:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="description" name="description"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">主图:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="imgMain" name="imgMain"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否下架:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="isSoldOut" name="isSoldOut"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<!-- <div class="layui-form-item">
				<label class="layui-form-label">是否允许被删除:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="isDel" name="isDel"
						class="layui-input" disabled="disabled"  >
				</div>
			</div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">推荐的权重:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="weight" name="weight"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否推荐到首页:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="isRecommendMain" name="isRecommendMain"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
		</form>
	</div>

<!-- 添加的弹层DIV -->
<div id="addDIV" style="display: none; margin-top: 20px;">
	<form class="layui-form" lay-filter="addForm" id="addForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称:</label>
				<div class="layui-input-inline" style="width: 350px; float: left;">
				<input type="text" id="name" name="name" class="layui-input"  autocomplete="off" >	
				</div>
			</div>
	      <div class="layui-form-item">
	      <label class="layui-form-label">产品类型</label>
				<div class="layui-input-inline" style="width: 150px;">
					<select id="pType_add" name="type_id">
						<option value="">--请选择--</option>
					</select>
				</div>
	      </div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品原价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="oldPrice" name="oldPrice"
						class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品现价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="newPrice" name="newPrice"
						class="layui-input"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品库存量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="storage" name="storage" class="layui-input"   >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">牌子:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="plate" name="plate" class="layui-input"  >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">尺寸:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="size" name="size" class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="cate" name="cate" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">出厂:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="factory" name="factory" class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">主石材质:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="texture" name="texture"
						class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">形状:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="shape" name="shape" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">副石材质:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="stone_material" name="stone_material" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">副石数量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="stone_num" name="stone_num"
						class="layui-input" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品描述:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="description" name="description"
						class="layui-input" >
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
			<button class="layui-btn" lay-filter="addSubmitBtn" lay-submit="">添加</button>
			</div>
		</form>
	</div>
	
	<!-- 编辑的弹层DIV -->
<div id="editDIV" style="display: none; margin-top: 20px;">
	<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称:</label>
				<div class="layui-input-inline" style="width: 350px; float: left;">
				<input type="text" id="name" name="name" class="layui-input">
				<input type="hidden" id="id" name="id">	
				</div>
			</div>
			<div class="layui-form-item">
	      <label class="layui-form-label">产品类型</label>
				<div class="layui-input-inline" style="width: 150px;">
					<select id="pType_edit" name="type_id">
						<option value="">--请选择--</option>
					</select>
				</div>
	      </div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品原价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="oldPrice" name="oldPrice"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品现价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="newPrice" name="newPrice"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品库存量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="storage" name="storage" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">牌子:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="plate" name="plate" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">尺寸:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="size" name="size" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="cate" name="cate" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">出厂:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="factory" name="factory" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">主石材质:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="texture" name="texture"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">形状:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="shape" name="shape" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">副石数量:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="stone_num" name="stone_num"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品描述:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="description" name="description"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">推荐的权重:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="weight" name="weight"
						class="layui-input" disabled="disabled"  >
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
			<button class="layui-btn" lay-filter="editSubmitBtn" lay-submit="">修改</button>
			</div>
		</form>
	</div>
	<!-- 图片上传的弹层页面  -->
	<div id="imgUploadLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="imgForm" id="imgForm"
			action="">
			<input type="hidden" id="pid-img" name="id" class="layui-input">
			<input type="hidden" id="mainImgUrl" name="mainImgUrl" class="layui-input">
			<input type="hidden" id="futuImgUrl" name="FuImgUrl" class="layui-input">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			  <legend>产品图片上传，上传完后记得提交哦</legend>
			</fieldset>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="maintu">主图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 300px;height:200px" />
			    <p id="demoText1"></p>
			  </div>
			</div>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="futu">副图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo2" style="width: 300px;height:200px" />
			    <p id="demoText2"></p>
			  </div>
			</div>  
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="imgSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>
	
	<!--定义数据表格table  -->
<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editImg"><i class="layui-icon">&#xe658;</i>图片上传</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail"><i class="layui-icon">&#xe658;</i>查看详情</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon">&#x1007;</i>删除</a>
		</script>
		
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll"><i class="layui-icon">&#xe1007;</i>批量删除</button>
  		</div>
		</script>
		<!-- 开关1（既能开也能关） -->
	<script type="text/html" id="switchBar1">
		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isSoldOut" lay-skin="switch" lay-text="上架|下架" {{d.isSoldOut=="0" ? "checked":""}}>
	</script>
	<script type="text/html" id="switchBar2">
		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isDel" lay-skin="switch" lay-text="可删除|不可删除" {{d.isDel=="1" ? "checked":""}}>
	</script>
	<script type="text/html" id="switchBar3">
		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isRecommendMain" lay-skin="switch" lay-text="推荐|不推荐" {{d.isRecommendMain=="1" ? "checked":""}}>
	</script>
<script type="text/javascript">
/*定义好各种组件   */
layui.use(['laydate','layer','form','table','tree','upload'], function() {
	var laydate = layui.laydate	//日期组件
		,layer = layui.layer	//弹层组件
		,form = layui.form		//表单组件
		,tree = layui.tree		//树形结构组件
		,upload = layui.upload  //上传组件
		,$= layui.jquery    	//jquery
		,table = layui.table;	//表格组件
		//获取分类，填充下拉选框的数据
		$(function() {
			$.ajax({
				type: 'get',				
				url: 'findPtype.do',					
				dataType: 'json',
				success: function(data) {
					$.each(data, function(index, item) {
						//填充下拉列表
						$('#pType').append(new Option(item.type_name, item.id)); 
					});
					$.each(data, function(index, item) {
						//填充下拉列表
						$('#pType_add').append(new Option(item.type_name, item.id)); 
					});
					$.each(data, function(index, item) {
						//填充下拉列表
						$('#pType_edit').append(new Option(item.type_name, item.id)); 
					});
					layui.form.render("select");
				},
				error: function() {
					alert("获取失败！！！")
				}
			});
		})
		/*开始使用组件*/
		//使用表格组件,渲染表格,填充数据
	 	table.render({
			elem: '#proTable',			//展示数据的表格id
			url: 'findProduct.do',//提交到后台的地址
			method:'get',          //请求方式
			even: true, 			//表格隔行变色
			page: true,				//开启分页	
			toolbar:'#toolbarDemo', //表格的工具栏
			title:'产品表',		//表格的名称
			cols: [
				[{
					field: 'ck',
					fixed: 'left',
					type: 'checkbox',
					width: 100
				},{
					field: 'id',	//跟实体类的属性对应
					align:'center', //对齐方式
					width: 80,	   //列的宽度
					title: 'ID',	//表头名称
					sort: true		//开启排序
				},{
					field: 'type_name',	
					width:  150, 
					title: '商品类型'	
				},{
					field: 'name',	
					width:  250, 
					title: '商品名称'	
	 	        },{
					field: 'oldPrice',	
					width: 150,
					title: '商品原价',
				},{
					field: 'newPrice',	
					width: 150,
					title: '商品现价'	
				},{
					field: 'storage',	
					width: 80,
					title: '商品库存量'		
	            }, {
	            	field: 'plate',	
					width: 80,
					title: '牌子'	
				}, {
					field: 'size',	
					width: 80,
					title: '尺寸'	
			    }, {
			    	field: 'cate',	
					width: 80,
					title: '类型'	
				}, {
					field: 'factory',	
					width: 80,
					title: '出厂'	
				}, {
					field: 'texture',	
					width: 80,
					title: '主石材质'	
				}, {
					field: 'shape',	
					width: 80,
					title: '形状'	
				}, {
					field: 'stone_material',	
					width: 80,
					title: '副石材质'	
				}, {
					field: 'stone_num',	
					width: 80,
					title: '副石数量'	
				}, {
					field: 'description',	
					width: 80,
					title: '商品描述'	
				}, {
					field: 'imgMain',	
					width: 80,
					title: '主图',
					templet:'<div><img src="../{{d.imgMain}}"></div>'
				}, {
					field: 'isSoldOut',	
					width: 100,
					title: '是否上架',
				    toolbar:'#switchBar1'
				}, {
					field: 'imgFu',	
					width: 80,
					title: '副图',
					templet:'<div><img src="../{{d.imgFu}}"></div>'
				}, {
					field: 'weight',	
					width: 80,
					title: '推荐的权重'	
				}, {
					field: 'weight',	
					width: 100,
					title: '是否推荐',
					toolbar:'#switchBar3'
				}, {
					fixed : 'right',
					width : 350,
					title : '操作',
					align : 'center',
					toolbar :'#barDemo'
					}]
				]
			});
	 	/*
		条件查询
		*/
		form.on('submit(search)', function (data) {
		var field = data.field;		
		//执行重载
		table.reload('proTable', {
		    page: { curr: 1 }, 		
		    where: field			 
		});
		});
			//表格头部工具栏事件
	table.on('toolbar(filterTable)', function(obj){
			var event=obj.event;
		    if (event == 'add'){
				//添加
				//清空上次表单内容
				$("#addForm")[0].reset();
		    	//打开弹层
				layer.open({
					type:1,             //页面层
					title: '您正在添加信息',//弹层标题
					content:$("#addDIV"),//弹层内容
					area: ['60%','80%']
				});
			} else if (event == 'delAll') {
				//批量删除

				//获取勾选的数据
				var checkStatus = table.checkStatus('proTable');//获取选中的数据
				var ids = [];
				for (var i = 0; i < checkStatus.data.length; i++) {
					ids.push(checkStatus.data[i].id);
				}
				if (ids.length == 0) {
					alert("请先勾选数据");
					return;
				}
				var idStr = ids.join(",");
				//使用Ajax发请求

	       if (confirm("确定删除吗？")) {
					$.ajax({
						type : 'post',
						url : 'deleteProducts.do',
						data : {"ids" : idStr}, //请求参数			
						dataType : 'json', //返回数据的格式			
						success : function(res) {
							//弹出提示信息
							layer.alert(res.msg);
							//刷新
							table.reload('proTable', {
								page : {
									curr : 1
								}
							})
						},
						error : function() { //提交失败
							alert("系统异常！！")
						}
					});
				}
			};
		})
		//单个操作
		//表格数据里的事件监听
		table.on('tool(filterTable)', function(obj) {
			var data = obj.data;//获取当前行的数据
			var event = obj.event;
			if (event == "detail") {
				//查看详情
				//清空上次表单内容
				$("#detailForm")[0].reset();
				//把当前行的数据回显到弹层页面
				form.val("detailForm", data)
				//打开弹层
				layer.open({
					type : 1, //页面层
					title : '您正在查看【' + data.id + '】信息',//弹层标题
					content : $("#detailDIV"),//弹层内容
					area : [ '60%', '80%' ]
				});
			} else if (event == "edit") {
				//编辑
				//清空上次表单内容
				$("#editForm")[0].reset();
				//把当前行的数据回显到弹层页面
				form.val("editForm", data)
				//打开弹层
				layer.open({
					type : 1, //页面层
					title : '您正在修改【' + data.id + '】信息',//弹层标题
					content : $("#editDIV"),//弹层内容
					area : [ '60%', '80%' ]
				});
			} else if (event == "delete") {
				if (confirm("确定删除吗？")) {
					$.ajax({
						type : 'post',
						url : 'deleteProduct.do',
						data : {
							"id" : data.id
						}, //请求参数			
						dataType : 'json', //返回数据的格式			
						success : function(res) {
							//弹出提示信息
							layer.alert(res.msg);
							//刷新表格
							table.reload('proTable', {
								page : {
									curr : 1
								}
							})
						},
						error : function() { //提交失败
							alert("系统异常！！")
						}
					});
				}
			}else if(event == "editImg"){
				//回显图片
				$("#demo1").attr("src","../"+data.imgMain)
				$("#demo2").attr("src","../"+data.imgFu)
				$("#demoTe、xt1").html("")
				$("#demoText2").html("")
				//清空上次表单内容
				$("#imgForm")[0].reset();
				//把当前行的数据回显到弹层页面
				form.val("imgForm", data)
				//打开弹层
				layer.open({
					type : 1, //页面层
					title : '您正在修改【' + data.id + '】信息',//弹层标题
					content : $("#imgUploadLayer"),//弹层内容
					area : [ '60%', '80%' ]
				})
			}

		});//有可能有错

		//添加弹层监听提交
		form.on('submit(addSubmitBtn)', function(data) {
			$.ajax({
				type : 'post', //方式
				url : 'insertProduct.do', //地址    
				data : $("#addForm").serialize(), //参数 //serialize 序列化取出所有的值
				dataType : 'json',
				success : function(res) {
					layer.alert(res.msg, {
						icon : 6
					}, function() {
						//关闭弹层
						layer.closeAll();
						//刷新父级页面的表格
						table.reload('proTable', {
							page : {
								curr : 1
							}
						});
					});
				},
				error : function() { //提交失败
					alert("系统异常！！")
				}
			});
			return false;
		});
		//修改弹层监听提交
		form.on('submit(editSubmitBtn)', function(data) {
			$.ajax({
				type : 'post', //方式
				url : 'updateProduct.do', //地址    
				data : $("#editForm").serialize(), //参数 //serialize 序列化取出所有的值
				dataType : 'json',
				success : function(res) {
					layer.alert(res.msg, {
						icon : 6
					}, function() {
						//关闭弹层
						layer.closeAll();
						//刷新父级页面的表格
						table.reload('proTable', {
							page : {
								curr : 1
							}
						});
					});
				},
				error : function() { //提交失败
					alert("系统异常！！")
				}
			});
			return false;
		});
		
		// 处理开关：点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		  form.on('switch(isSoldOut)', function (data) {
			  var id = $(this).attr('data-id');			//获得当前点击对象的id值
			  var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
			  var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
			  layer.open({
				  content: '确定要修改状态吗？'				//给用户的友好提示
				  ,btn: ['确定', '取消']
				  ,yes: function(index, layero){
					  data.elem.checked=x;
					  layer.close(index);
					  $.ajax({
						  type : "POST",
						  url : "updateisSoldOut.do",
						  data : {"id" : id , "valid" : valid},
						  success : function(res) {
							  if(res){
								  layer.msg("修改成功！");
							  }else{
								  layer.msg("修改失败！");
							  }
							  form.render();
						  },
						  error : function() {
						  }
					  });
				  }
				  ,btn2: function(index, layero){
					  //按钮【按钮二】的回调
					  data.elem.checked=!x;
					  form.render();
					  layer.close(index);
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
				  ,cancel: function(){
					  //右上角关闭回调
					  data.elem.checked=!x;
					  form.render();
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
			  });
			  form.render();
			  return false;
		  });
		
		  form.on('switch(isDel)', function (data) {
			  var id = $(this).attr('data-id');			//获得当前点击对象的id值
			  var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
			  var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
			  layer.open({
				  content: '确定要修改状态吗？'				//给用户的友好提示
				  ,btn: ['确定', '取消']
				  ,yes: function(index, layero){
					  data.elem.checked=x;
					  layer.close(index);
					  $.ajax({
						  type : "POST",
						  url : "updateisDel.do",
						  data : {"id" : id , "valid" : valid},
						  success : function(res) {
							  if(res){
								  layer.msg("修改成功！");
							  }else{
								  layer.msg("修改失败！");
							  }
							  form.render();
						  },
						  error : function() {
						  }
					  });
				  }
				  ,btn2: function(index, layero){
					  //按钮【按钮二】的回调
					  data.elem.checked=!x;
					  form.render();
					  layer.close(index);
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
				  ,cancel: function(){
					  //右上角关闭回调
					  data.elem.checked=!x;
					  form.render();
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
			  });
			  form.render();
			  return false;
		  });
		  
		  form.on('switch(isRecommendMain)', function (data) {
			  var id = $(this).attr('data-id');			//获得当前点击对象的id值
			  var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
			  var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
			  layer.open({
				  content: '确定要修改状态吗？'				//给用户的友好提示
				  ,btn: ['确定', '取消']
				  ,yes: function(index, layero){
					  data.elem.checked=x;
					  layer.close(index);
					  $.ajax({
						  type : "POST",
						  url : "updateisRecommendMain.do",
						  data : {"id" : id , "valid" : valid},
						  success : function(res) {
							  if(res){
								  layer.msg("修改成功！");
							  }else{
								  layer.msg("修改失败！");
							  }
							  form.render();
						  },
						  error : function() {
						  }
					  });
				  }
				  ,btn2: function(index, layero){
					  //按钮【按钮二】的回调
					  data.elem.checked=!x;
					  form.render();
					  layer.close(index);
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
				  ,cancel: function(){
					  //右上角关闭回调
					  data.elem.checked=!x;
					  form.render();
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
			  });
			  form.render();
			  return false;
		  });
		  
		//主图片上传
			var uploadInst1 = upload.render({
				elem: '#maintu'
				,url: 'uploadImg.do'
				,accept:'images'
				,size:50000
				,before: function(obj){
					//预读本地文件
					obj.preview(function(index, file, result){
						$('#demo1').attr('src', result);
					});
				}
				,done: function(res){
					//如果上传失败
					if(res.code > 0){
						return layer.msg('上传失败');
					}
					
					//上传成功
					var demoText = $('#demoText1');
					demoText.html('<span style="color: #4cae4c;">上传成功</span>');
					//图片url填写
					var fileupload = $("#mainImgUrl");
					fileupload.attr("value",res.data);
				}
				,error: function(){
					//演示失败状态，并实现重传
					var demoText = $('#demoText1');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function(){
						uploadInst1.upload();
					});
				}
			});
		   //副图片上传
			var uploadInst2 = upload.render({
				elem: '#futu'
				,url: 'uploadImg.do'
				,accept:'images'
				,size:50000
				,before: function(obj){
					//预读本地文件
					obj.preview(function(index, file, result){
						$('#demo2').attr('src', result);
					});
				}
				,done: function(res){
					//如果上传失败
					if(res.code > 0){
						return layer.msg('上传失败');
					}
					
					//上传成功
					var demoText = $('#demoText2');
					demoText.html('<span style="color: #4cae4c;">上传成功</span>');
					//图片url填写
					var fileupload = $("#futuImgUrl");
					fileupload.attr("value",res.data);
				}
				,error: function(){
					//演示失败状态，并实现重传
					var demoText = $('#demoText2');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function(){
						uploadInst2.upload();
					});
				}
			});
		   
			//图片上传的提交按钮
			form.on('submit(imgSubmit)', function(data) {
				console.log($("#imgForm").serialize());
				$.ajax({
					type: 'post', 					//提交方式get或post
					url: 'editImg.do', 						//提交路径
					data: $("#imgForm").serialize(), 	//参数
					dataType: 'json', 					//返回的数据类型
					success: function(res) { 		//提交成功
						layer.closeAll();			//关闭弹层
						layer.alert(res.msg);		//提示信息
						table.reload('proTable'); 	//刷新表格
					},
					error: function() { //提交失败
						alert("系统异常！！")
					}
				}); 
				return false;
			});
	});

</script>
</body>
</html>